<template>
    <div class="chooseBoard" :style="{transform:'scale('+scaleNum+')','transform-origin':'0px 0px'}">
        <div class="title">
            <div :class="languageStr==='English'?'content':'encontent'">
                <span>{{languagePack.fourteen}}</span>
            </div>
            <div class="timer">
                <span>{{time}}</span>
            </div>
            <div class="laugBox" @click="changeLaug">
                <div class="changeLau" v-focusable>
                    <img width="38px" v-if="languageStr==='简体中文'" src="~images/bigScreen/motorFactory/china.png" alt />
                    <img width="38px" v-if="languageStr==='English'" src="~images/bigScreen/motorFactory/english.png" alt />
                    <span>{{languageStr}}</span>
                </div>
            </div>
        </div>
        <div class="selectBtn">
            <div :class="item.point?'selectBg1':'selectBg2'" v-for="(item,index) of selArr" :key="index"
             @click="changePoint(item.id)" v-focusable>
                <span v-if="languageStr==='English'">{{item.nameCn}}</span>
                <span v-else>{{item.nameEn}}</span>
            </div>
        </div>
        <div class="bigbox">
            <div class="secBox">
                <div class="singleBox" v-for="(item,index) of urlData" :key="'url1'+index" v-focusable @click="gobigScreen(item)">
                    <div class="topbox">
                        <div class="itemfang">
                            <span :class="languageStr==='English'?'spanCn':'spanEn'">{{languagePack.one}}</span>
                        </div>
                        <img src="~images/bigScreen/chooseBoard/companyScreen.png" alt />
                    </div>
                    <div class="bottombox">
                        <span class="titleName">{{languageStr==='English'?item.titleCN:item.titleEN}}</span>
                        <span class="titleItem"></span>
                        <span>{{languagePack.one}}：{{item.companyName}}</span>
                    </div>
                </div>
            </div>
            <div class="secBox">
                <div class="singleBox" v-for="(item,index) of urlData1" :key="urlData.length+index" v-focusable @click="gobigScreen(item)">
                    <div class="topbox">
                        <div class="itemfang" :style="{background:'rgb(38,159,175)'}">
                            <span :class="languageStr==='English'?'spanCn':'spanEn'">{{languagePack.two}}</span>
                        </div>
                        <img src="~images/bigScreen/chooseBoard/factoryScreen.png" alt />
                    </div>
                    <div class="bottombox">
                        <span class="titleName">{{languageStr==='English'?item.titleCN:item.titleEN}}</span>
                        <span class="titleItem"><span>{{languagePack.two}}：{{item.floorName}}</span></span>
                        <span>{{languagePack.one}}：{{item.companyName}}</span>
                    </div>
                </div>
            </div>
            <div class="secBox">
                <div class="singleBox" v-for="(item,index) of urlData2" :key="urlData.length+urlData1.length+index" v-focusable @click="gobigScreen(item)">
                    <div class="topbox">
                        <div class="itemfang" :style="{background:'rgb(54,73,217)'}">
                            <span :class="languageStr==='English'?'spanCn':'spanEn'">{{languagePack.three}}</span>
                        </div>
                        <img src="~images/bigScreen/chooseBoard/lineScreen.png" alt />
                    </div>
                    <div class="bottombox">
                        <span class="titleName">{{languageStr==='English'?item.titleCN:item.titleEN}}</span>
                        <span class="titleItem"><span>{{languagePack.two}}：{{item.floorName}}</span><span>{{languagePack.three}}：{{item.areaName}}</span></span>
                        <span>{{languagePack.one}}：{{item.companyName}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "chooseBoard",
        components: {},
        data(){
            return{
                time: this.$moment(new Date()).format('HH:mm:ss 丨 YYYY/MM/DD'),
                scaleNum:'',
                selArr:[
                    {id:99,point:true,nameEn:'All',nameCn:'全部',blur:{default:true}},
                    {id:1,point:false,nameEn:'SOC',nameCn:'公司'},
                    {id:2,point:false,nameEn:'Factory',nameCn:'厂区'},
                    {id:3,point:false,nameEn:'Line',nameCn:'产线'},
                ],
                chineseArr:{
                    one:'公司',
                    two:'厂区',
                    three:'产线',
                    fourteen:'选择展示看板',
                },
                englishArr:{
                    one:'SOC',
                    two:'Factory',
                    three:'Line',
                    fourteen:'Select the Dashboard',
                },
                languageStr:'English',
                languagePack:{},
                urlData:[],
                urlData1:[],
                urlData2:[],
            }
        },
        mounted(){
            
        },
        activated(){
            let url= window.localStorage.getItem('tpmJumpUrl')
            if(url&&url!=''){
                let index = url.indexOf("?")==-1?url.length:url.indexOf("?");
                let result = url.substring(0,index);
                let index1 = url.indexOf("=");
                let query = {hierarchyCode:url.substring(index1 + 1,url.length)}
                this.$nextTick(()=>{
                    this.$router.push({path:result,query})
                })
            }else{
                this.$tv.findFocusType  = 0;
                this.$tv.offsetDistance = 50
                this.timer1 = setInterval(this.refreshTime, 1000);
                // this.languagePack = this.chineseArr
                this.onresize()
                this.getList(99)
                window.addEventListener('resize', this.onresize, false);
                this.$nextTick(()=>{
                    this.$tv.scrollEl = this.$tv.getElementByPath('//div[@class="bigbox"]')
                })
            }

          if (window.localStorage.getItem('language') === 'en_US') {
            this.languageStr = '简体中文'
            this.languagePack = this.englishArr
            this.$i18n.locale = 'en_US'
          } else {
            this.languageStr = 'English'
            this.languagePack = this.chineseArr
            this.$i18n.locale = 'zh_CN'
          }
        },
        methods:{    
            gobigScreen(item){
                window.localStorage.setItem('tpmJumpUrl', item.url);
                let index = item.url.indexOf("?")==-1?item.url.length:item.url.indexOf("?");
                let result = item.url.substring(0,index);
                let index1 = item.url.indexOf("=");
                let query = {hierarchyCode:item.url.substring(index1 + 1,item.url.length)}
                this.$router.push({path:result,query})
            },
            changePoint(id){
                for(let item of this.selArr){
                    if(item.id === id){
                        item.point = true
                        this.getList(id)
                    }else{
                        item.point = false
                    }
                }
            },
            //切换语言
            changeLaug(){
                if(this.languageStr==='English'){
                    this.languageStr = '简体中文'
                    this.languagePack = this.englishArr
                  window.localStorage.setItem('language','en_US')
                }else{
                    this.languageStr = 'English'
                    this.languagePack = this.chineseArr
                    window.localStorage.setItem('language','zh_CN')

                }
            },
            //计算缩放
            onresize(){
                const Width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                const Height = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;
                const scaleW = Width < 1920 ? (Width /  1920) : 1;
                const scaleH = Height < 1080 ? (Height / 1080) : 1;
                this.scaleNum = scaleW > scaleH ? scaleH : scaleW
            },
            //时间戳
            refreshTime(){
                this.time = this.$moment(new Date()).format('HH:mm:ss 丨 YYYY/MM/DD');
            },
            //
            getList(id){
                this.axios({
                    method: 'get',
                    url: '/dms/large/screen/get',
                    params: {
                        type:id,
                    }
                }).then(res => {
                    if(res.code === 200){
                        this.urlData = res.data.filter(item => {
                            if(item.type==1){
                                return {
                                    ...item,
                                    point: false
                                }
                            }
                        })
                        this.urlData1 = res.data.filter(item => {
                            if(item.type==2){
                                return {
                                    ...item,
                                    point: false
                                }
                            }
                        })
                        this.urlData2 = res.data.filter(item => {
                            if(item.type==3){
                                return {
                                    ...item,
                                    point: false
                                }
                            }
                        })
                    }
                })
            },
        },
        beforeDestroy() {
            // clearInterval(this.timer1);
            // window.removeEventListener('resize', this.onresize, false);
        },
        deactivated(){
            clearInterval(this.timer1);
            window.removeEventListener('resize', this.onresize, false);
            this.$tv.resetFindFocusType(); //this.$tv.findFocusType  = 1;
            this.$tv.resetScrollEl(); 
        },
        
    }
</script>

<style scoped lang="scss">
    .chooseBoard{
        background: url(~images/bigScreen/chooseBoard/bg.png) no-repeat;
        background-size: cover;
        height: 1080px;
        width: 1920px;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-content: flex-start;
        .title{
            background: url(~images/bigScreen/chooseBoard/header.png) no-repeat;
            background-size: cover;
            margin-top: 10px;
            height: 133px;
            width: 1889px;
            display:flex;
            justify-content:center;
            padding: 6px 0;
            .timer{
                position: absolute;
                right: 186px;
                top: 25px;
                color: #fff;
                span{
                    font-size: 20px;
                }
            }
            .laugBox{
                position: absolute;
                right: 16px;
                top: 6px;
                background: rgb(2,25,49);
                padding: 5px;
                cursor: pointer;
                .changeLau{
                    background: url(~images/bigScreen/motorFactory/lauBox.png) no-repeat;
                    background-size: cover;
                    height: 37px;
                    width: 120px;
                    padding: 0 8px;
                    display: flex;
                    justify-content:space-between;
                    align-items: center;
                    border: 1px solid rgba(255, 0, 0, 0);
                    span{
                        color: #fff;
                        font-size: 16px;
                    }
                }
            }
            .content{
                font-weight: bold;
                line-height: 46px;
                letter-spacing: 8px;
                color: #fff;
                text-shadow: 1px 1px 1px #fff;
                span{
                    font-size: 32px;
                }
            }
            .encontent{
                span{
                    font-size: 32px;
                }
                font-weight: bold;
                line-height: 46px;
                color: #fff;
                text-shadow: 1px 1px 1px #fff;
            }
        }
        .selectBtn{
            height: 60px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            .selectBg1{
                background: url(~images/bigScreen/chooseBoard/titleborder.png) no-repeat;
                background-size: cover;
                height: 52px;
                width: 165px;
                margin: 0 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                span{
                    font-size: 22px;
                    color: #fff;
                }
            }
            // .focus {
            //     // transform: scale(1.1);
            //     background: url(~images/bigScreen/chooseBoard/titleborder1.png) no-repeat;
            //     background-size: cover;
            //     height: 52px;
            //     width: 165px;
            //     margin: 0 20px;
            //     display: flex;
            //     justify-content: center;
            //     align-items: center;
            //     cursor: pointer;
            //     span{
            //         font-size: 22px;
            //         color: rgb(75,128,205);
            //     }
            // }
            .selectBg2{
                background: url(~images/bigScreen/chooseBoard/titleborder1.png) no-repeat;
                background-size: cover;
                height: 52px;
                width: 165px;
                margin: 0 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                span{
                    font-size: 22px;
                    color: rgb(75,128,205);
                }
            }
        }
        .bigbox{
            height: 870px;
            width: 100%;
            padding: 10px 20px;
            overflow: scroll;
            &::-webkit-scrollbar {
                width: 0px;
                height: 0px;
            }
            .secBox{
                display: flex;
                flex-wrap: wrap;
                align-content: flex-start;
                .singleBox{
                    background: url(~images/bigScreen/chooseBoard/bigscreen.png) no-repeat;
                    background-size: cover;
                    height: 276px;
                    width: 312px;
                    padding: 22px;
                    cursor: pointer;
                    .topbox{
                        width: 100%;
                        height: 140px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        border: 2px solid rgba(255, 255, 255,0);
                        border-bottom: 0px;
                        img{
                            height: 90%;
                        }
                        .itemfang{
                            position:absolute;
                            top: 10px;
                            right: 0%;
                            width: 80px;
                            height: 30px;
                            background: rgb(58,141,254);
                            border-radius: 60px 0 0 60px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            .spanEn{
                                font-size: 14px;
                                color: #fff;
                                text-align: center;
                            }
                            .spanCn{
                                font-size: 18px;
                                color: #fff;
                                text-align: center;
                            }
                        }
                    }
                    .bottombox{
                        width: 100%;
                        height: 90px;
                        border: 2px solid rgba(255, 255, 255,0);
                        border-top: 0px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-content: space-between;
                        padding: 10px 20px;
                        span{
                            color: rgb(204,225,237);
                        }
                        .titleName{
                            // text-shadow: 1px 1px 1px #fff;
                            font-size: 12px;
                            color: #fff;
                        }
                        .titleItem{
                            display: flex;
                            justify-content: space-between;
                        }
                        
                    }
                }
            }
        }
        
    }
    
</style>
<style lang="scss">
.chooseBoard{
    .focus {
        transform: scale(1.05);
        border: 1px solid #fff !important;
        // box-shadow: 0 0 20px #fff;
    }
    .ivu-modal-content{
        background-color: rgba(30,67,116,0.5);
    }
    .ivu-modal-footer{
        border-top:0px;
    }
    .modalContent{
        height: 200px;
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        span{
            font-size: 20px;
            padding: 10px 0;
            color: #fff;
        }
    }
    .modalBtn{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        .modalfooter{
            width: 50px;
            height: 40px;
            // border: 1px solid #fff;
        }
    }
}
    
</style>
